﻿{include file="../application/admin/view/common/header.html" /}
        <!--[if lt IE 9]>
          <script src="_JS_/html5shiv.min.js"></script>
          <script src="_JS_/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .btn-blue,.btn-blue:hover,.btn-blue:focus{background-color: #3171b4;border-color: #3171b4;color:#ffffff;}
            .video-title{background-color: #aad4ff;color: #111111;}
            .video-list{padding: 0;max-height: 607px;overflow-y: auto;}
            .video-title,.video-list{text-align: center;}
            .video-title p{margin-bottom: 0;line-height: 42px;padding-left: 0 !important;padding-right: 0 !important;}
             ul li{list-style-type: none;}
            .video-list li{line-height: 38px;border-bottom: 1px solid #e5e5e5; }
            .video-list li span{ vertical-align:middle; margin:auto;height: 100%;display: block; }
            .video-list li p{white-space:nowrap; text-overflow:ellipsis; overflow:hidden;margin-bottom: 0;cursor: pointer;}
            .video-num{display: inline-block;position:relative;width: 53px;height: 53px;border: 1px solid #e5e5e5;text-align: center;line-height: 53px;color: #666666;margin-left: 29px;margin-bottom: 15px; }
            .triangle-topright{width: 0;height: 0;top: 0;right: 0;border-top: 20px solid #ffffff;border-left: 20px solid transparent; position: absolute;}
            .video-state{padding: 0;}
            .video-state li{display: inline-block;float: left;margin-bottom: 15px;}
            .video-op{text-align: right;padding: 0;}
            .video-op a{color: #666666;margin-right: 5px;}
            .border-blue{border-color: #3171b4;}
            .border-top-blue{border-top-color: #3171b4;}
            .bg-c{background-color: #3171b4;color: #ffffff;}
        </style>

        <!--main content start-->
        <section class="main-content">


            <!--start page content-->

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default collapsed">
                        <div class="panel-heading"> 
                            <div class="col-md-12"><a href="video_management.html"><<返回</a></div>
                            <a class="btn btn-danger ui-w" onclick="datadel()" href="javascript:void(0);"><span class="ui-icon ui-icon-trash"> </span>批量删除</a>
                            <a class="btn btn-blue ui-w" onclick="news_add(this)" href="javascript:void(0);"><span class="ui-icon ui-icon-plus"></span>添加视频</a>
                            <div class="search-form">
                                <input type="text" class="form-control" placeholder="输入视频标题" />
                                <button type="button" class="btn-search" onclick="search_btn()"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="col-lg-4 col-md-5 col-xs-5">
                                <div class="panel panel-red">
                                    <div class="panel-heading">
                                        <div class="col-md-12 col-xs-12 video-title"><p class="col-md-3 col-xs-3">选择</p><p class="col-md-3 col-xs-3">序号</p><p class="col-md-6 col-xs-6">视频标题</p></div>
                                    </div>
                                    <div class="panel-body">
                                        <ul class="video-list col-md-12 col-xs-12" id="sortable">
                                            <!--<li kid="1" class="col-md-12 col-xs-12 bg-c"><span class="col-md-3 col-xs-3"><input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">01</span><p class="col-md-6 col-xs-6" title="企业发展12313123">企业发展01</p></li>-->
                                            <!--<li kid="2" class="col-md-12 col-xs-12"><span class="col-md-3 col-xs-3"><input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">02</span><p class="col-md-6 col-xs-6" title="企业发展12313123">企业发展02</p></li>-->
                                            <!--<li kid="3" class="col-md-12 col-xs-12"><span class="col-md-3 col-xs-3"><input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">03</span><p class="col-md-6 col-xs-6" title="企业发展12313123">企业发展03</p></li>-->
                                            <!--<li kid="4" class="col-md-12 col-xs-12"><span class="col-md-3 col-xs-3"><input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">04</span><p class="col-md-6 col-xs-6" title="企业发展12313123">企业发展04</p></li>-->
                                            <!--<li kid="5" class="col-md-12 col-xs-12"><span class="col-md-3 col-xs-3"><input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">05</span><p class="col-md-6 col-xs-6" title="企业发展12313123">企业发展05</p></li>-->
                                            <!--<li kid="6" class="col-md-12 col-xs-12"><span class="col-md-3 col-xs-3"><input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">06</span><p class="col-md-6 col-xs-6" title="企业发展12313123">企业发展06</p></li>-->

                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div  class="col-lg-8 col-md-7 col-xs-7">
                                <div class="panel">
                                    <div class="panel-heading num-list" id="num-list">
                                        <!--<a class="video-num border-blue" href="#" num="1">1<span class="triangle-topright border-top-blue"></span></a>-->
                                        <!--<a class="video-num" href="#" num="2">2<span class="triangle-topright"></span></a>-->
                                        <!--<a class="video-num" href="#" num="3">3<span class="triangle-topright"></span></a>-->
                                        <!--<a class="video-num" href="#" num="4">4<span class="triangle-topright"></span></a>-->
                                        <!--<a class="video-num" href="#" num="5">5<span class="triangle-topright"></span></a>-->
                                        <!--<a class="video-num" href="#" num="6">6<span class="triangle-topright"></span></a>-->
                                    </div>
                                    <div class="panel-body" style="padding-top: 0px;">
                                        <div class="col-md-12" style="padding: 0;">
                                            <div class="panel" style="min-height: 328px;">
                                                <div class="panel-heading" style="background-color: #aad4ff;">
                                                    <div class="pull-right video-op col-md-7 col-xs-7">
                                                        <a href="#" onclick="video_down(this)"><i class="fa fa-cloud-download"></i>下架</a>
                                                        <a href="#" onclick="video_edit(this)"><i class="fa fa-pencil"></i>编辑</a>
                                                        <a href="#" onclick="video_del(this)"><i class="fa fa-trash-o"></i>删除</a>
                                                    </div>
                                                    <span>&nbsp</span>
                                                </div>
                                                <div class="panel-body">
                                                    <ul class="video-state">
                                                        <li class="col-lg-3 col-md-10 col-xs-10">发布人：<span></span></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">学习次数：<span></span></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">收藏次数：<span></span></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">发布时间：<span></span></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">视频类别：<span></span></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">点赞次数：<span></span></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">评论次数：<a href="#" onclick="video_comment()"></a></li>
                                                        <li class="col-lg-3 col-md-10 col-xs-10">状态：<span></span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            
                        </div>
                    </div>
            </div><!--end row-->
                   
        </section>
        <!--end main content-->

        <!--Common plugins-->
        <script src="_JS_/jquery.min.js"></script>
        <script src="_JS_/bootstrap.min.js"></script>
        <script src="_JS_/jquery.base64.js"></script>
        <script src="_JS_/jquery.cookie.js"></script>
        <script src="_JS_/jasny-bootstrap.min.js"></script>
        <script src="_JS_/jquery.slimscroll.min.js"></script>
        <script src="_JS_/jquery.nanoscroller.min.js"></script>
        <script src="_JS_/jquery-ui.min.js"></script>
        <script src="_JS_/metismenu.min.js"></script>
        <script src="_JS_/float-custom.js"></script>
        <script type="text/javascript" src="_JS_/layer/layer.js"></script>
        <script type="text/javascript" src="_JS_/laypage/laypage.js"></script>
        <script type="text/javascript" src="_JS_/getMyDate.js"></script>
        <!-- <script src="js/footable.all.min.js"></script> -->
         <!-- Page-Level Scripts -->
    <script>
        $("#page-title").html("视频管理");
        var url=window.location.href;
        user_id = url.split("=")[1];
        $(function(){
            video_list();
        });
        function video_list(){
            var search=$(".search-form input").val();
            $.ajax({
                type: "get",
                url: "/index.php/api/video/video_list",
                dataType: 'jsonp',
                jsonp: 'callback',
                data: {'l_id': user_id,'search':search},
                beforeSend: function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#333333'] //0.1透明度的白色背景
                    });
                },
                success: function (msg) {
                    layer.closeAll();
                    if(msg.code == 200) {
                        var html_one = "";
                        var html_two = "";
                        if(msg.data.length>0) {
                            for (var i = 0; i < msg.data.length; i++) {
                                html_one += '<li id="' + msg.data[i].id + '" kid="' + (i + 1) + '" class="col-md-12 col-xs-12"><span class="col-md-3 col-xs-3">';
                                html_one += '<input type="checkbox" name="allcheck"></span><span class="order-num col-md-3 col-xs-3">';
                                html_one += (i + 1) + '</span><p class="col-md-6 col-xs-6" title="' + msg.data[i].v_title + '">' + msg.data[i].v_title + '</p></li>';
                                html_two += '<a id="' + msg.data[i].id + '" class="video-num" href="#" num="' + (i + 1) + '">' + (i + 1) + '<span class="triangle-topright"></span></a>';
                            }
                            $('#sortable').html(html_one);
                            $('#num-list').html(html_two);
                            $('#sortable').find("li:eq(0)").addClass("bg-c");
                            $('#num-list').find("a:eq(0)").addClass("border-blue");
                            $('#num-list').find("span:eq(0)").addClass("border-top-blue");
                            detail(msg.data[0].id);
                        }
                    }

                    /*左侧列表选择集数*/
                    $(".video-list li").on("click",function(){
                        $(".video-list li").removeClass("bg-c");
                        $(this).addClass("bg-c");
                        var num=$(this).attr("kid");
                        $(".num-list a").removeClass("border-blue").find("span").removeClass("border-top-blue");
                        $(".num-list").find("a").eq(num-1).addClass("border-blue").find("span").addClass("border-top-blue");
                        var id=$(this).attr("id");
                        detail(id);
                    });
                    /*右侧集数选择*/
                    $(".num-list a").on("click",function(){
                        var num=$(this).attr("num");
                        n=parseInt(num);
                        $(".num-list a").removeClass("border-blue").find("span").removeClass("border-top-blue");
                        $(this).addClass("border-blue").find("span").addClass("border-top-blue");
                        /*左侧列表*/
                        $(".video-list li").removeClass("bg-c");
                        $(".video-list").find("li").eq(num-1).addClass("bg-c");
                        var id=$(this).attr("id");
                        detail(id);
                    });
                }
            })
        }
     /*批量删除*/
     function datadel(){
         var id=$('.video-state').attr('id');
         var arrs=new Array();
         $(".video-list input[name='allcheck']:checked").each(function(){
             arrs.push($(this).parent().parents('li').attr('id'));
         });
         if(arrs.length==0 ){
             layer.msg('请选择删除项!',{icon:1,time:1000});
             return false;
         }
         var uids=arrs.join(",");
         layer.confirm('确认要删除多个视频吗？',function(index){
             $.ajax({
                 type: "get",
                 url: "{:url('Api/video/video_del')}",
                 dataType: 'jsonp',
                 jsonp:'callback',
                 data: {'id':uids,'status':'3'},
                 success: function (msg) {
                     if(msg.code == 200){
                         $(".video-list input[name='allcheck']:checked").parents('li').remove();
                         video_list(id);
                         layer.msg('已删除!',{icon:1,time:1000});
                     }
                     if(msg.code==1000){
                         layer.msg('删除失败!',{icon:5,time:1000});
                     }
                 }
             });
         });
     }
    /*添加*/
    function news_add(obj){
        layer.open({
            type: 2,
            title: '添加',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: 'video_add.html#'+user_id
        }); 
    }
    //编辑
    function video_edit(obj){
        var id=$('.video-state').attr('id');
        layer.open({
            type: 2,
            title: '编辑',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: 'video_edit.html#'+id
        }); 
    }
    /*删除*/
    function video_del(obj){
        layer.confirm('确认要删除吗？',function(index){
            var id=$('.video-state').attr('id');
            $.ajax({
                type: "get",
                url: "/index.php/api/video/video_del",
                dataType: 'jsonp',
                jsonp:'callback',
                data: {'id':id,'status':'3'},
                success: function (msg) {
                    if(msg.code == 200){
                        video_list(id);
                        layer.msg('已删除!',{icon: 1,time:1000});
                    }
                    if(msg.code==1000){
                        layer.msg('删除失败!',{icon:5,time:1000});
                    }
                }
            });
        });
    }

    //评论
    function video_comment(){
        var id=$('.video-state').attr('id');
        layer.open({
            type: 2,
            title: '评论',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '520px'],
            content: 'video_comment.html#'+id
        }); 
    }


    /*下架*/
    function video_down(obj,id){
        layer.confirm('确认要下架吗？',function(index){
            $.ajax({
                type: "get",
                url: "{:url('api/video/video_del')}",
                dataType: 'jsonp',
                jsonp:'callback',
                data: {'id':id,'status':'2'},
                success: function (msg) {
                    if(msg.code == 200){
                        detail(id);
                        layer.msg('已下架!',{icon: 1,time:1000});
                    }
                    if(msg.code==1000){
                        layer.msg('下架失败!',{icon:5,time:1000});
                    }
                }
            });
        });
    }

    /*上架*/
    function video_up(obj,id){
        layer.confirm('确认要发布吗？',function(index){
            $.ajax({
                type: "get",
                url: "{:url('api/video/video_del')}",
                dataType: 'jsonp',
                jsonp:'callback',
                data: {'id':id,'status':'1'},
                success: function (msg) {
                    if(msg.code == 200){
                        detail(id);
                        layer.msg('已上架!',{icon: 1,time:1000});

                    }
                    if(msg.code==1000){
                        layer.msg('发布失败!',{icon:5,time:1000});
                    }
                }
            });
        });
    }


    /*拖拽排序*/
    $(function() {
        $( "#sortable" ).sortable({
            stop: function( event, item ) {
                setnum();
                var num=$(".video-list").find(".bg-c").attr("kid");
                $(".num-list a").removeClass("border-blue").find("span").removeClass("border-top-blue");
                $(".num-list").find("a").eq(num-1).addClass("border-blue").find("span").addClass("border-top-blue");
                sort_list();
            }
        });
       /* $( "#sortable" ).disableSelection();*/
    });
    function setnum(){
        var obj = $('#sortable li');
        obj.each(function(i){
        $(this).attr("kid",i+1);
        $(this).find(".order-num").html('0'+(i+1));
        })
    }
        function sort_list(){
            var arrs=new Array();
            $('#sortable').find('li').each(function(i){
                 //arrs[i]=$(this).attr('id');
                arrs.push($(this).attr('id'));
            });
            var arr=arrs.join(",");
            $.ajax({
                type: "get",
                url: "{:url('api/video/video_sort')}",
                dataType: 'json',
                data: {'arr':arr},
                success: function (msg) {
                    if(msg.code == 200){
                        layer.msg('成功!',{icon: 1,time:1000});
                    }
                    if(msg.code==1000){
                        layer.msg('网络错误!',{icon:5,time:1000});
                    }
                }
            });
        }

    function detail(id){
        $.ajax({
            type: "get",
            url: "/index.php/api/video/video_detail",
            dataType: 'jsonp',
            jsonp: 'callback',
            data: {'id': id},
            success:function (msg) {
                if(msg.code==200){
                    $('.video-state').attr('id',msg.data.id);
                    $('.video-state').find("span:eq(0)").html(msg.data.username);
                    $('.video-state').find("span:eq(1)").html(msg.data.v_views);
                    $('.video-state').find("span:eq(2)").html(msg.data.v_collect);
                    $('.video-state').find("span:eq(3)").html(getMyDate((msg.data.time)*1000));
                    $('.video-state').find("span:eq(4)").html(msg.data.name);
                    $('.video-state').find("span:eq(5)").html(msg.data.v_likes);
                    $('.video-state').find("a").html(msg.data.comments);
                    $('.pull-right').parent().find("span").html(msg.data.v_title);
                    if(msg.data.status==1){
                        $('.video-state').find("span:eq(6)").html("已发布");
                        $('.pull-right').find("a:eq(0)").remove();
                        $('.pull-right').prepend('<a href="#" onclick="video_down(this,'+msg.data.id+')"><i class="fa fa-cloud-download"></i>下架</a>');
                    }else{
                        $('.video-state').find("span:eq(6)").html("未发布");
                        $('.pull-right').find("a:eq(0)").remove();
                        $('.pull-right').prepend('<a href="#" onclick="video_up(this,'+msg.data.id+')"><i class="fa fa-cloud-upload"></i>上架</a>');
                    }
                }
            }
        })
    }

        //回车键绑定搜索
        $(".search-form").keydown(function(event){
            if(event.keyCode==13){
                search_btn();
            }
        });
        //搜索
        function search_btn(){
            video_list();
        }


    </script>
    </body>
</html>